<template>
    <div class="loign">
        <div class="all">
            <div class="body">
                <div class="txt">欢迎使用超帅的TPM系统</div>
                    {{ data }}
                <div>
                    <el-input type="text" v-model="data.phone" class="input input_up" placeholder="请输入账号"
                        clearable></el-input>
                </div>

                <div>
                    <el-input type="password" v-model="data.password" class="input input_down" placeholder="请输入密码"
                        clearable></el-input>
                </div>

                <button class="btn" @click="login">登录</button>

            </div>

        </div>

    </div>
</template>

<script>
import { sysLogin } from '@/api/role';

export default {
    data() {
        return {
            data: {
                phone: "13298761234",
                password: "123456"
            },

        };
    },
    methods: {
        login() {
            if (this.data.phone == "" || this.data.password == "") {
                alert("账号或密码不能为空");
                return;
            }
            let that = this;
            sysLogin(this.data).then(res => {
                if (res.data.code == 2001) {
                    // console.log(res.data.data)
                    localStorage.setItem("token", res.data.data);
                    that.$message({
                        message: '登录成功',
                        type: 'success'
                    });
                    that.$router.push({
                        path: "/home/device"
                    })
                } else {
                    that.$message.error(res.data.message);
                }


            })
        }
    }

}
</script>

<style scoped>
.all {
    margin: 0 auto;
    width: 100%;
    height: 800px;
    /* 插入背景图片 */
    background-image: url("@/assets/u103.png");
    /* 其他样式 */
    background-size: cover;
    /* 或者使用 contain */
    background-position: center;
    background-repeat: no-repeat;

    width: 100%;
    height: 100vh;
}

.body {
    position: absolute;
    top: 35%;
    left: 45%;
    margin: 0 auto;
    /* margin-top: 400px; */
    width: 300px;
    /* height: 300px; */
    /* background-color: #AECDF7; */
    text-align: center;
}

.body>span {
    font-size: large;
    margin-bottom: 15px;
    font-family: "华文细黑";
}

.input {
    width: 300px;
    margin-bottom: 10px;
    margin-top: 15px;
}

.btn {
    width: 300px;
    height: 50px;
    margin-top: 10px;
    background-color: #F36A41;
    border-radius: 2px;
    font-size: 20px;
}

.txt{
    font-size: 42px;
    color: #A4BDBB;
    margin-bottom: 20px;
    font-family: "华文行楷";
}
</style>